<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 用户培训详情</el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-row :gutter="20"
                class="mgb20">
          <el-col :span="24"
                  style="margin-left: 0px">
            <el-card shadow="hover"
                     :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <!-- <i class="el-icon-lx-file grid-con-icon"></i> -->
                <img :src="avatar"
                     style="width:188px" />
                <p v-text="accountD"
                   style="position: absolute;top:10px;left:200px;"></p>
                <p v-text="departmentD"
                   style="position: absolute;top:35px;left:200px;"></p>
                <p v-text="roleD"
                   style="position: absolute;top:60px;left:200px;"></p>
                <p v-text="telphoneD"
                   style="position: absolute;top:85px;left:200px;"></p>
                <p v-text="emailD"
                   style="position: absolute;top:110px;left:200px;"></p>
                <div class="grid-cont-right">

                  <div style="width:200px;background-color: blanchedalmond;position: absolute;top:5px;left:380px">
                    <p>追求卓越</p>
                    <el-progress :percentage="skillData.zuoyue"
                                 :height="21"
                           
                                 color="#ed5a65"></el-progress>
                    <p>抗压能力</p>
                    <el-progress :percentage="skillData.kangya"
                                 :height="21"
                               
                                 color="#74759b"></el-progress>
                    <p>学习能力</p>
                    <el-progress :percentage="skillData.xuexi"
                                 :height="21"
                                 
                                 color="#45b787"></el-progress>
                    <p>积极主动</p>
                    <el-progress :percentage="skillData.jiji"
                                 :height="21"
                                 
                                 color="#5d3131"></el-progress>
                  </div>
                  <div style="width:200px;background-color: blanchedalmond;position: absolute;top:5px;left:590px">
                    <p>沟通能力</p>
                    <el-progress :percentage="skillData.goutong"
                                 :height="21"
                               
                                 color="#ed5a65"></el-progress>
                    <p>团队合作</p>
                    <el-progress :percentage="skillData.hezuo"
                                 :height="21"
                               
                                 color="#74759b"></el-progress>
                    <p>协作能力</p>
                    <el-progress :percentage="skillData.xiezuo"
                                 :height="21"
                               
                                 color="#45b787"></el-progress>
                    <p>影响说服</p>
                    <el-progress :percentage="skillData.yingxiang"
                                 :height="21"
                               
                                 color="#5d3131"></el-progress>
                  </div>
                  <div style="width:200px;background-color: blanchedalmond;position: absolute;top:5px;left:800px">
                    <p>决策判断</p>
                    <el-progress :percentage="skillData.juece"
                                 :height="21"
                               
                                 color="#ed5a65"></el-progress>
                    <p>高效执行</p>
                    <el-progress :percentage="skillData.gaoxiao"
                                 :height="21"
                               
                                 color="#74759b"></el-progress>
                    <p>规划安排</p>
                    <el-progress :percentage="skillData.guihua"
                                 :height="21"
                           
                                 color="#45b787"></el-progress>
                    <p>认真负责</p>
                    <el-progress :percentage="skillData.renzhen"
                                 :height="21"
                            
                                 color="#5d3131"></el-progress>
                  </div>

                  <div style="position:absolute;left:1000px;top:55px">
                    培训名称：<el-input class="handle-input mr10"
                              style="width:150px;"
                              v-model="query.trainingname"></el-input>
                    <el-button type="primary"
                               icon="el-icon-search"
                               @click="handleSearch">搜索</el-button>
                    <el-button type="primary"
                               icon="el-icon-search"
                               @click="restart">重置</el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-card class="box-card"
             v-for="item in cardData"
             :key="item.id"
             style="margin-bottom: 20px">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img :src="item.cover"
                 style="width:250px">
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <table>
              <tr>
                培训名称：
                {{
                                     item.trainingname
                                }}
              </tr>
              <tr>
                培训描述：
                {{
                                    item.introduction
                                }}
              </tr>
              <tr>
                类型：
                {{ 
                                    item.category
                                }}
              </tr>
              <tr>
                难度：
                {{
                                    item.score
                                }}
              </tr>
            </table>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-button type="primary">进入培训</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div class="pagination">
      <el-pagination background
                     layout="total, prev, pager, next"
                     :current-page="pageparm.currentPage"
                     :page-size="pageparm.pageSize"
                     :total="pageparm.total"
                     @current-change="handlePageChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
  name: 'dashboard',
  data () {
    return {
      accountD: '',
      departmentD: '',
      roleD: '',
      telphoneD: '',
      emailD: '',
      avatar: '',
      userid: '',
      cardData: [],
      skillData: [],
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 5
      },
      query: {
        cover: '',
        trainingname: '',
        introduction: '',
        category: '',
        score: ''
      }
    };
  },

  created () {
    this.getData();

  },
  watch: {
    '$route.params.id': function () {
      this.getData();
    },
  },
  methods: {
    getData () {
      this.userid = localStorage.getItem("studyid")
      this.$axios
        .get('/api/trainings/findTrainingById/' + this.pageparm.currentPage + '/' + this.pageparm.pageSize + "/" + this.userid)
        .then((res) => {
          if (res.data.code == 200) {
            this.cardData = res.data.data.list;
            this.pageparm.total = res.data.data.total;
            this.$axios.get("/api/study/findOneUser/" + this.userid).then(res => {
              if (res.data.code == 200) {
                this.accountD = "用 户:" + res.data.data.user.account;
                this.departmentD = "部 门:" + res.data.data.user.department;
                this.telphoneD = "电 话:" + res.data.data.user.telphone;
                this.emailD = "邮 箱:" + res.data.data.user.email;
                this.roleD = "角 色:" + res.data.data.role;
                this.avatar = res.data.data.user.avatar;
                this.$axios.get("/api/study/findSkill/" + this.userid).then(res => {
                  this.skillData = res.data.data
                })
              }
            })
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 分页导航
    handlePageChange (val) {
      this.$set(this.pageparm, 'currentPage', val);
      //console.log(val);
      this.getData();
    },
    // 触发搜索按钮
    handleSearch () {
      this.$axios.get("/api/study/findSearch/" + this.userid + "/" + this.query.trainingname).then(res => {
        this.cardData = res.data.data;
      })
    },
    restart () {
      this.query.trainingname = '';
      this.getData();
    }
  }
};
</script>


<style scoped>
.handle-input {
    width: 200px;
    display: inline-block;
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 150px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    color: #fff;
}
.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
